<!--
 * @Descripttion: 员工信息管理
 * @version: 
 * @Author: 许国辉
 * @Date: 2022-09-13 22:53:38
 * @LastEditors: 许国辉
 * @LastEditTime: 2023-10-16 11:55:01
-->
<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="handleCreate">新增员工</a-button>
      <a-popconfirm title="确认批量同步" @confirm="autoSync">
        <a-button type="primary">批量同步</a-button>
      </a-popconfirm>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <!-- <template v-if="column.key === 'action'">
          <a-button type="primary" @click="showModal(record)" style="margin: 10px">查看</a-button>
          <a-button type="primary" @click="handleEdit(record)" style="margin: 10px">编辑</a-button>
          <a-popconfirm title="确认删除" @confirm="handleDelete(record)">
            <a-button type="primary" danger style="margin: 10px">删除</a-button>
          </a-popconfirm>
        </template> -->
        <TableAction
          :actions="[
            {
              icon: 'clarity:info-standard-line',
              label: '查看',
              tooltip: '查看员工详情',
              onClick: showModal.bind(null, record),
            },
            {
              icon: 'clarity:note-edit-line',
              label: '编辑',
              tooltip: '编辑员工信息',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '删除',
              tooltip: '删除此员工信息',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
            {
              icon: 'ant-design:copy-outlined',
              label: '同步',
              tooltip: '同步员工信息',
              popConfirm: {
                title: '是否确认同步信息',
                placement: 'left',
                confirm: isSync.bind(null, record),
              },
              ifShow: record.isSync == 0,
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <employeeModel @register="registerModal" @success="handleSuccess" />
  <!-- 详情页 -->
  <a-modal
    style="width: 40%"
    v-model:visible="visible"
    title="员工详情"
    ok-text="确认"
    cancel-text="取消"
    :maskClosable="false"
    :keyboard="false"
    mask
    @ok="hideModal"
  >
    <a-card
      size="small"
      :bordered="false"
      :title="employeeInfo?.name + '信息明细'"
      style="width: 100%"
    >
      <!-- <template #extra
        >是否同步<a-button
          type="primary"
          @click="isSync(employeeInfo)"
          v-if="employeeInfo?.isSync === 0"
          >信息同步
        </a-button>
        <a-button type="primary" disabled>已同步</a-button>
      </template> -->
      <table width="100%">
        <tr align="center" valign="middle">
          <td th:width="90px">
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工编号</label>
          </td>
          <td th:width="120px">
            {{ employeeInfo?.employeeNum }}
          </td>
          <td th:width="90px">
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工姓名</label>
          </td>
          <td th:width="140px">
            {{ employeeInfo?.name }}
          </td>
        </tr>
        <tr align="center" valign="middle">
          <td style="width: 120px">
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">性别</label>
          </td>
          <td>
            {{ employeeInfo?.sex === 0 ? '男' : '女' }}
          </td>
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工状态</label>
          </td>
          <td>
            {{ employeeInfo?.termination === 0 ? '冻结' : '正常' }}
          </td>
        </tr>
        <tr align="center" valign="middle">
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">是否审批</label>
          </td>
          <td>
            {{ employeeInfo?.isApp === 0 ? '不需要' : '需要' }}
          </td>
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工级别</label>
          </td>
          <td>{{ employeeInfo?.levelName }} </td>
        </tr>

        <tr align="center" valign="middle">
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">身份证</label>
          </td>
          <td colspan="3" style="text-align: left; padding-left: 10px">
            {{ employeeInfo?.certNo }}
          </td>
        </tr>
        <tr align="center" valign="middle">
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">手机</label>
          </td>
          <td colspan="3" style="text-align: left; padding-left: 10px">
            {{ employeeInfo?.moblie }}
          </td>
        </tr>
        <tr align="center" valign="middle">
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">Email</label>
          </td>
          <td colspan="3" style="text-align: left; padding-left: 10px">
            {{ employeeInfo?.email }}
          </td>
        </tr>
        <tr align="center" valign="middle">
          <td>
            <label class="col-sm-2 form-control" style="margin-bottom: 0px">审批单扫描</label>
          </td>
          <td colspan="3" style="text-align: left; padding-left: 10px">
            {{ employeeInfo?.isQrCode === 0 ? '不具备' : '具备' }}
          </td>
        </tr>
      </table>
    </a-card>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, toRaw } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import {
    getEmployeeListResultModel,
    delEmployeeEntityVO,
    syncEmployeeEntityVO,
    autoSyncEmployeeEntityVO,
  } from '/@/api/baseInfo/employeeAPI';
  import { columns, searchFormSchema } from './tableEmployeeData';
  import { useModal } from '/@/components/Modal';
  import employeeModel from './employeeModel.vue';
  import { EmployeeInfoModel } from '/@/api/baseInfo/model/EmployeeInfoModel';
  import { message } from 'ant-design-vue';

  // import { useRouter } from 'vue-router';
  export default defineComponent({
    components: { BasicTable, TableAction, employeeModel },
    setup() {
      const employeeInfo = ref<EmployeeInfoModel>();
      const [registerModal, { openModal }] = useModal();
      const visible = ref<boolean>(false);
      const [registerTable, { reload }] = useTable({
        title: '员工信息列表',
        api: getEmployeeListResultModel,
        rowKey: 'id',
        columns,
        formConfig: { labelWidth: 120, schemas: searchFormSchema, autoSubmitOnEnter: true },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        // actionColumn: {
        //   width: 200,
        //   title: '操作',
        //   dataIndex: 'action',
        // },
        tableSetting: { fullScreen: true },
      });
      const hideModal = () => {
        visible.value = false;
      };

      const showModal = (record) => {
        employeeInfo.value = toRaw(record);
        visible.value = true;
      };
      async function isSync(record) {
        await syncEmployeeEntityVO(record).then((result) => {
          message.info(result);
          reload();
        });
      }
      async function autoSync() {
        await autoSyncEmployeeEntityVO().then((result) => {
          message.info(result);
          reload();
        });
      }
      function handleCreate() {
        openModal(true, { isUpdate: false });
      }
      function handleEdit(record: Recordable) {
        openModal(true, { record, isUpdate: true });
      }
      async function handleDelete(record: Recordable) {
        await delEmployeeEntityVO({
          id: toRaw(record.employeeId),
          employeeNum: toRaw(record.employeeNum),
        });
        reload();
      }
      function handleSuccess() {
        reload();
      }

      //router是全局路由对象，route= userRoute()是当前路由对象
      // let router = useRouter();

      onMounted(() => {});

      return {
        registerTable,
        handleCreate,
        handleEdit,
        handleDelete,
        registerModal,
        handleSuccess,
        visible,
        showModal,
        employeeInfo,
        hideModal,
        isSync,
        autoSync,
      };
    },
  });
</script>
<style lang="less" scoped>
  td {
    border: solid #666666;
    border-width: 0px 1px 1px 0px;
    height: 20px;
  }

  table {
    border: solid #666666;
    border-width: 1px 0px 0px 1px;
  }
</style>
